import React from 'react'
import { BaseDetailPage, http, IBaseDetailPageState, IBaseDetailPageProps, routeUtils, UdDetail } from '../../../lib'
import { Table, Row, Col, Card } from 'antd'
import './index.scss'
import apis from '@/apis/ContractManage'
import dayjs from 'dayjs'


export default class Detail extends BaseDetailPage<IPurchaseDetailProps, IPurchaseDetailState> {

  private ProductsAndArea = [
    ["RegionName", "经销商区域名称"],
    ["DistributeTypeName", "销售渠道"],
    ["ProductLevelName", "产品类别"],
    ["ProductLevelId", "产品类别代码"],
    ["LimitAmount", "限制数量"],
    ["LimitMoney", "限制金额"],
    ["LimitTransaction", "限制交易次数"],
    ["Remark", "备注"]
  ]
  private SalesTargetSplits = [
    [
      ["RegionName", "经销商区域名称"],
      ["ProductLevelName", "产品类别名称"],
      ["ProductLevelId", "产品类别代码"],
      ["BeginTime", "期间从", (text) => ((new Date(text)).toLocaleDateString())],
      ["EndTime", "期间到", (text) => ((new Date(text)).toLocaleDateString())],
      ["TargetMoney", "目标金额"],
      ["TargetAmount", "目标数量"],
      ["MeasureUnitName", "计量单位"],
      ["Remark", "备注"]
    ],
    [
      ["RegionName", "经销商区域名称"],
      ["ProductLevelName", "产品类别名称"],
      ["ProductLevelId", "产品类别代码"],
      ["BeginTime", "期间从", (text) => ((new Date(text)).toLocaleDateString())],
      ["EndTime", "期间到", (text) => ((new Date(text)).toLocaleDateString())],
      ["TargetMoney", "目标金额"],
      ["TargetAmount", "目标数量"],
      ["MeasureUnitName", "计量单位"],
      ["Remark", "备注"]
    ]
  ]
  private PriceSystem = [
    ["ProductName", "物料描述", null, { minWidth: '200px' }],
    ["ProductId", "物料代码", null, { minWidth: '200px' }],
    ["PriceTypeName", "价格类型", null, { minWidth: '200px' }],
    ["DistributeTypeName", "客户分销渠道", null, { minWidth: '100px' }],
    ["TradeTermName", "国际贸易条件", null, { minWidth: '100px' }],
    ["Price", "价格", null, { minWidth: '100px', align: 'right' }],
    ["PriceUnit", "计价单位", null, { width: '100px' }],
    ["MeasureUnitName", "计量单位", null, { width: '100px' }],
    ["BeginTime", "有效从", (text) => ((new Date(text)).toLocaleDateString()), { width: '100px' }],
    ["EndTime", "有效到", (text) => ((new Date(text)).toLocaleDateString()), { width: '100px' }],
    ["Remark", "备注", null, { minWidth: '80px' }]
  ]
  private PromotionalDeposit = [
    ["ProductName", "物料描述"],
    ["ProductId", "物料代码"],
    ["MarginTypeName", "保证金类型"],
    ["PriceTypeName", "价格类型"],
    ["Money", "金额"],
    ["PriceUnit", "计价单位"],
    ["MeasureUnitName", "计量单位"],
    ["BeginTime", "有效从", (text) => ((new Date(text * 1)).toLocaleDateString())],
    ["EndTime", "有效到", (text) => ((new Date(text * 1)).toLocaleDateString())],
    ["Remark", "备注"]
  ]
  private ContractIncentivePolicy = [
    ["ProductLevelName", "产品类别名称"],
    ["ProductLevelId", "产品类别代码"],
    ["ProductName", "物料描述"],
    ["ProductId", "物料代码"],
    ["BeginTime", "有效从", (text) => ((new Date(text)).toLocaleDateString())],
    ["EndTime", "有效到", (text) => ((new Date(text)).toLocaleDateString())],
    ["BaseMoney", "大于等于金额"],
    ["Amount", "数量"],
    ["MeasureUnitName", "计量单位"],
    ["DiscountPercent", "优惠比例%"],
    ["Remark", "备注"]
  ]
  private CostSupportRatio = [
    ["ProductName", "物料描述"],
    ["ProductId", "物料代码"],
    ["BeginTime", "有效期从", (text) => ((new Date(text)).toLocaleDateString())],
    ["EndTime", "有效期到", (text) => ((new Date(text)).toLocaleDateString())],
    ["Rate", "费用支持比例%"],
    ["Remark", "备注"]
  ]
  private DeliveryTarget = [
    ["DistributeTypeName", "销售渠道"],
    ["BeginTime", "开始日期", (text) => ((new Date(text)).toLocaleDateString())],
    ["EndTime", "截至日期", (text) => ((new Date(text)).toLocaleDateString())],
    ["Amount", "数量"],
    ["Remark", "备注"]
  ]

  constructor(props: IPurchaseDetailProps) {
    super(props)
    const { dealerCode } = routeUtils.searchStringToObject(this.props.location.search, { dealerCode: '' })
    this.state = {
      columnsConfigs: this.ProductsAndArea.map(item => ({ dataIndex: item[0], title: item[1] })),
      dataSource: {
        ContractElements: []
      },
      tableType: "ProductsAndArea",
      title: <div><span>合同详情</span></div>,
      queryAction: () => {
        return http.get(apis.GetContractDetail, {
          params: {
            Number: this.props.match.params.id,
            dealerCode,
          }
        })
      }
    }
  }

  //切换表格
  private handleChangeTable = (tableType) => {
    if (tableType === "SalesTargetSplits") {
      this.setState({
        tableType, columnsConfigs: [
          this[tableType][0].map(item => (item.length < 3 ? { dataIndex: item[0], title: item[1] } : { dataIndex: item[0], title: item[1], render: item[2] })),
          this[tableType][1].map(item => (item.length < 3 ? { dataIndex: item[0], title: item[1] } : { dataIndex: item[0], title: item[1], render: item[2] })),
        ]
      })
    } else {
      this.setState({ tableType, columnsConfigs: this[tableType].map(item => (item.length < 3 ? { dataIndex: item[0], title: item[1] } : { dataIndex: item[0], title: item[1], render: item[2] })) })
    }
  }

  render() {
    return super.render({
      body: (
        <>
          <UdDetail title="抬头信息" className='left-align-label' dataSource={this.state.dataSource} items={[
            { title: '合同编号', dataIndex: 'Number' },
            { title: '合同名称', dataIndex: 'Name' },
            { title: '甲方公司名称', dataIndex: 'PartyNameA' },
            { title: '乙方客户名称', dataIndex: 'PartyNameB' },
            { title: '合同状态', dataIndex: 'EffectiveStatus' },
            { title: '有效期', dataIndex: 'BeginTime', render: (text) => {
              let render = text ? dayjs(text).format('YYYY-MM-DD') : ''
              render += this.state.dataSource.EndTime ? '至' + dayjs(this.state.dataSource.EndTime).format('YYYY-MM-DD') : ''
              return render
            } },
            { title: '延期天数', dataIndex: 'DelayDate' },
          ]} />
          {/* 要素信息 用服务端返回的数据遍历渲染 */}
          <div className='ud-detail left-align-label'>
            <Card title='合同要素信息' size="small">
              <Row gutter={15}>
                {
                  this.state.dataSource.ContractElements.map((item, index) => <Col key={index}  {...{ xs: 24, sm: 24, md: 24, lg: 24, xl: 12, xxl: 8 }}>
                    <div className="item-title">{item.name}：</div>
                    <div className="item-content">{item.value}</div>
                  </Col>)
                }
              </Row>
            </Card>
          </div>
          <div className="details-tables-box">
            <ul className={this.state.tableType}>
              {this.state.dataSource["ProductsAndArea"] && <li style={this.state.tableType === "ProductsAndArea" ? { color: "#1890ff" } : {}} onClick={() => { this.handleChangeTable("ProductsAndArea") }}>经销产品及区域</li>}
              {(this.state.dataSource["SalesTargets"] || this.state.dataSource["SalesTargetSplits"]) && <li style={this.state.tableType === "SalesTargetSplits" ? { color: "#1890ff" } : {}} onClick={() => { this.handleChangeTable("SalesTargetSplits") }} >产品销售目标拆解</li>}
              {this.state.dataSource["PriceSystem"] && <li style={this.state.tableType === "PriceSystem" ? { color: "#1890ff" } : {}} onClick={() => { this.handleChangeTable("PriceSystem") }}>价格体系</li>}
              {this.state.dataSource["PromotionalDeposit"] && <li style={this.state.tableType === "PromotionalDeposit" ? { color: "#1890ff" } : {}} onClick={() => { this.handleChangeTable("PromotionalDeposit") }}>促销保证金</li>}
              {this.state.dataSource["ContractIncentivePolicy"] && <li style={this.state.tableType === "ContractIncentivePolicy" ? { color: "#1890ff" } : {}} onClick={() => { this.handleChangeTable("ContractIncentivePolicy") }}>合同奖励政策</li>}
              {this.state.dataSource["CostSupportRatio"] && <li style={this.state.tableType === "CostSupportRatio" ? { color: "#1890ff" } : {}} onClick={() => { this.handleChangeTable("CostSupportRatio") }}>费用支持比例</li>}
              {this.state.dataSource["DeliveryTarget"] && <li style={this.state.tableType === "DeliveryTarget" ? { color: "#1890ff" } : {}} onClick={() => { this.handleChangeTable("DeliveryTarget") }}>铺货目标</li>}
            </ul>
            {
              this.state.tableType === "SalesTargetSplits" ? <>
                <h4 style={{ fontSize: "13px", padding: "10px 20px", color: "#1890ff" }}>年度销售目标</h4>
                <Table
                  rowKey={(record, index) => index + ""}
                  pagination={false}
                  dataSource={this.state.dataSource["SalesTargets"]}
                  columns={this.state.columnsConfigs[0]}
                />
                <div style={{ height: "10px" }}></div>
                <h4 style={{ fontSize: "13px", padding: "10px 20px", color: "#1890ff" }}>月度销售目标</h4>
                <Table
                  rowKey={(record, index) => index + ""}
                  pagination={false}
                  dataSource={this.state.dataSource["SalesTargetSplits"]}
                  columns={this.state.columnsConfigs[1]}
                />
                <div style={{ height: "40px" }}></div>
              </> :
                <>
                  <Table
                    scroll={{ x: true }}
                    rowKey={(record, index) => index + ""}
                    pagination={false}
                    dataSource={this.state.dataSource[this.state.tableType]}
                    columns={this.state.columnsConfigs}
                  />
                  <div style={{ height: "40px" }}></div>
                </>
            }
          </div>
        </>
      )
    })
  }

}

interface IPurchaseDetailProps extends IBaseDetailPageProps<{ id: string }> { }
interface IPurchaseDetailState extends IBaseDetailPageState {
  columnsConfigs: any,
  tableType: string
}
